import React, { Component } from 'react'
import { DeleteOutlined } from '@ant-design/icons'
import TheDialog from "@/components/TheDialog";
import GoBack from "../../../../components/TheGoBack";
import {
    apiGetHelpQuestionList,
    apiGetHelpQuestionEdit,
    apiGetHelpQuestionAdd,
    apiGetHelpQuestionDel
} from '@/request/configuration'
import '../../style/index.less'
import TheTable from "../../../../components/TheTable";
import EditorForm from "./editorForm";
import TheButton from "../../../../components/TheButton";

class Editor extends Component {
    state = {
        data: [
            {
                title: '如何购买',
                q: '如何购买',
                a: '不知道'
            }
        ],
        dataColumns: [
            {
                title: <div style={{ textAlign: 'center' }}>问题列表</div>,
                dataIndex: 'questionTitle',
                key: 'questionClassify',
                render: (text, record) => {
                    return <div className={'question-item-classify'}>
                        <p onClick={() => this.openDialog('editor', record)}>{text}</p>
                        <div className="button-group">
                            <TheButton auth={'helpCenter:delete'} type={'text'}
                                onClick={(e) => this.del(e, record)}><DeleteOutlined /></TheButton>
                        </div>
                    </div>
                }
            }
        ],
        dialogStatus: false,
        btnLoading: false,
        loading: false,
        editorData: null,
        formType: ''
    }

    async componentDidMount() {
        await this.getData()
    }

    getData = async () => {
        this.setState({
            loading: true
        })
        const { id } = this.props.match.params
        const data = await apiGetHelpQuestionList({ questionClassifyId: id })
        if (data.code === 0) {
            this.setState({
                data: data.data,
                loading: false
            })
        }
    }
    del = (e, value) => {
        e.stopPropagation()
        React.$confirm({
            title: "警告",
            content: '确定删除此数据信息吗？',
            onOk: async () => {
                const data = await apiGetHelpQuestionDel({ questionId: value.questionId })
                if (data.code === 0) {
                    await this.getData()
                }
            }
        });
    }

    openDialog = (type, value) => {
        if (type === 'add') {
            this.setState({
                dialogStatus: true,
                formType: type
            })
        } else {
            this.setState({
                dialogStatus: true,
                editorData: value,
                formType: type
            })
        }
    }
    onFinish = async value => {
        const { formType } = this.state
        let data = null
        this.setState({
            btnLoading: true
        })
        data = formType === 'add' ? await apiGetHelpQuestionAdd(value) : await apiGetHelpQuestionEdit(value)
        data.code === 0 && this.setState({
            btnLoading: false,
            dialogStatus: false,
            formType: '',
            editorData: null
        }, () => {
            this.getData()
        })
    }

    handleCancel = () => {
        this.setState({
            dialogStatus: false,
            editorData: null
        })
    }

    render() {
        const { data, dialogStatus, btnLoading, editorData, loading, dataColumns, formType } = this.state
        const { id } = this.props.match.params
        return <div className='help-center-editor'>
            <GoBack history={this.props.history} title={'问题分类'} />
            <div className={"p-layout-box configuration"}>
                <div className={'p-layout-content'}>
                    <TheButton size={'middle'} type={'default'} auth={'helpCenter:add'}
                        onClick={() => this.openDialog('add')}
                        style={{ width: '100%', marginBottom: 20 }}>新增问题</TheButton>
                    <TheTable scroll={{ x: 'max-content' }} loading={loading} dataSource={data} columns={dataColumns} />
                    <TheDialog
                        title={'问题详情'}
                        visible={dialogStatus}
                        handleCancel={this.handleCancel}
                        footer={null}
                        width={400}
                    >
                        <EditorForm formType={formType} data={{ ...editorData, questionClassifyId: id }}
                            btnLoading={btnLoading}
                            handleCancel={this.handleCancel} onFinish={this.onFinish} />
                    </TheDialog>
                </div>
            </div>
        </div>
    }
}

export default Editor